<script>
    /**
     * 部门选择穿梭框
     */
</script>

<template>
    <el-dialog :title="dialog.title" :visible.sync="dialog.isShow" width="615px" center class="zdy-dialog">
        <el-row>
            <!--顶部面包屑-->
            <el-col :span="24" class="zdy-breadCrumbs">
                <span class="other-span hover-pointer" v-if="breadCrumbs.length>2">
                    <div class="bread-crumbs-name text-nowrap" @click="breadGetChild(breadCrumbs[breadCrumbs.length-3],breadCrumbs.length-3)">
                        {{breadCrumbs[breadCrumbs.length-3].name}}
                    </div>
                    <i class="el-icon-arrow-right"></i>
                </span>
                <span class="other-span hover-pointer" v-if="breadCrumbs.length>1">
                    <div class="bread-crumbs-name text-nowrap" @click="breadGetChild(breadCrumbs[breadCrumbs.length-2],breadCrumbs.length-2)">
                        {{breadCrumbs[breadCrumbs.length-2].name}}
                    </div>
                    <i class="el-icon-arrow-right" v-if="breadCrumbs.length>0&&breadCrumbs.length>1"></i>
                </span>
                <span class="now-span" v-if="breadCrumbs.length>0">
                    <div class="bread-crumbs-name text-nowrap">{{breadCrumbs[breadCrumbs.length-1].name}}</div>
                </span>
            </el-col>
            <!--左边选择框-->
            <el-col :span="12" style="padding-right:5px;box-size:border-box;">
                <div class="hou-deprt-block">
                    <div class="hou-sel-all"><input type="checkbox" class="hover-pointer" v-model="isSelectAll" @change="changeAllSel">全选</div>
                    <ul class="hou-dprt-ul">
                        <li v-for="item in nowDepartment" :key="item.id">
                            <div class="dprt">
                                <img src="../assets/images/construction.png" alt="">
                                <span class="text-nowrap">{{ item.name }}</span>
                            </div>
                            <img src="../assets/images/childClass.png" class="hover-pointer" alt="" @click="getPresonsById(item.id);getTreeNodeById(item)">
                        </li>
                        <li v-for="item in presonsData" :key="item.user_id" class="hover-pointer">
                            <div class="preson-item">
                                <input type="checkbox" v-model="item.isSelect" class="hover-pointer" @change="selOnes(item,$event)"/>
                                <img :src="item.avatar||require('@/assets/images/avatar.png')" alt="">
                                <span class="text-nowrap">{{ item.user_name }}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-col>
            <!--右边选中框-->
            <el-col :span="12" style="padding-left:5px;box-size:border-box;">
                <div class="hou-deprt-block">
                    <ul class="hou-dprt-ul hou-dprt-ul-right">
                        <li v-for="(item,index) in isSelPresons" :key="item.id">
                            <div class="preson-item">
                                <img :src="item.avatar||require('@/assets/images/avatar.png')" alt="">
                                <span class="text-nowrap">{{ item.user_name }}</span>
                            </div>
                            <i class="el-icon-circle-close hover-pointer" @click="removeSel(item,index)"></i>
                        </li>
                    </ul>
                </div>
            </el-col>
        </el-row>
        <!--底部按钮-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialog.isShow = false" onFocus="this.blur()">取 消</el-button>
            <el-button type="primary" @click="isOk" class="zdy-alert-btn" onFocus="this.blur()">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import {getAllDepartmentsApi,getUserByDepartIdApi} from "@/api"
export default {
    name:'dialogos',
    data(){
        return {
            /**弹窗控制器 */
            dialog:{
                title:'选择部门与人员',
                isShow:false,
            },
            /**面包屑数据源 */
            breadCrumbs:[{name:'列表',id:-1}],
            /**树菜单原型 */

            treeModel:[],
            /**当前树节点 */
            nowDepartment:[],//右边
            /**当前树节点的人员 */

            presonsData:[],
            /**选中的人员 */
            isSelPresons:[],//
            /**是否全选 */
            isSelectAll:false,
        }
    },
    created(){
        this.getDepartmentTreeData();
    },
    methods:{
        /**获取总树*/
        getDepartmentTreeData(){
            getAllDepartmentsApi().then(res=>{
                this.treeModel = res;
                this.nowDepartment = res;
            });
        },
        /**根据部门id获取员工信息 */
        getPresonsById(id){
            getUserByDepartIdApi({depart_id:id}).then(res=>{
                /**已经选中的ids集合 */
                let _selIds = this.isSelPresons.map(item=>{return item.user_id});
                /**遍历获取到的数据 */
                res.map(item=>{
                    /**检索已经选中的数据*/
                    item.isSelect = _selIds.includes(item.user_id);
                })
                this.presonsData = res;
                /**监听是否全部选完 */
                this.isSelectAll = this.presonsData.filter(item=>{if(item.isSelect) return item}).length == this.presonsData.length;
            });
        },

        /**根据id获取树子集 */
        getTreeNodeById(data){
            // if(data.children.length){
                !this.breadCrumbs.map(item=>{return item.id}).includes(data.id)?this.breadCrumbs.push(data):'';
            // }
            this.nowDepartment = this.getTreeChild(this.treeModel,data.id);
        },
        /**递归 */
        getTreeChild(arr,id){
            /**存值*/
            var getParam = null;
            for(var item in arr){
                if (arr[item].id==id) {
                    getParam = arr[item].children;
                    break;
                }
                if (arr[item].children&&arr[item].children.length!=0) {
                    getParam = this.getTreeChild(arr[item].children,id);
                    if(getParam){
                        break;
                    }
                }
            }
            return getParam;
        },
        /**选中监听 */
        selOnes(data,e){
            /**监听是否全部选完 */
            this.isSelectAll = this.presonsData.filter(item=>{if(item.isSelect) return item}).length == this.presonsData.length;
            /**选中项内是否存在该值 */
            let ishave = this.isSelPresons.map(item=>{return item.user_id}).includes(data.user_id);
            /**当前选择状态*/
            if(e.target.checked){
                /**选中时*/
                !ishave?this.isSelPresons.push(data):'';
                return e.target.checked;
            }
            ishave?this.isSelPresons=this.isSelPresons.filter(item=>{if(item.user_id!=data.user_id) return item}):'';
        },
        /*全选监听 */
        changeAllSel(e){
            e.target.checked?this.presonsData.map(item=>{
                !this.isSelPresons.map(fitem=>{return fitem.user_id}).includes(item.user_id)?this.isSelPresons.push(item):'';
                item.isSelect=true;
            }):this.presonsData.map(item=>{
                this.isSelPresons.map((mitem,index)=>{mitem.user_id==item.user_id?this.isSelPresons.splice(index,1):'';});
                item.isSelect=false;
            });
        },
        /**移除已选中 */
        removeSel(data,index){
            this.isSelPresons.splice(index,1);
            /**取消部门列表选中 */
            this.presonsData.map(mitem=>{data.user_id==mitem.user_id?data.isSelect = false:''});
            /**全选按钮监听 */
            this.isSelectAll = this.presonsData.filter(item=>{if(item.isSelect) return item}).length == this.presonsData.length;
        },
        /**根据面包屑获取部门数据 */
        breadGetChild(data,index){
            this.breadCrumbs = this.breadCrumbs.filter((item,curr)=>{
                if(curr<=index){
                    return item;
                }
            });
            if(data.id==-1){
                this.nowDepartment = this.treeModel;
                this.presonsData = [];
            }else{
                /**获取点击后的人 */
                this.getPresonsById(data.id);
                /**根据id获取子部门 */
                this.nowDepartment = this.getTreeChild(this.treeModel,data.id);
            }

        },
        /**部门选中后执行 */
        isOk(){
            this.$emit('getSelectPreson',this.isSelPresons);
            this.isSelPresons = [];
            this.presonsData = [];
            this.breadCrumbs = [{name:'列表',id:-1}];
            this.getDepartmentTreeData();
            this.dialog.isShow = false;
        }
    }
}
</script>
<style>
    /* bgcolor */
    .hou-deprt-block{
        border-radius: 4px;
        background: #f4f6f8;
        padding: 10px 0;
        box-sizing: border-box;
    }
    .text-nowrap{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* 面包屑 */
    .zdy-breadCrumbs{
        margin-bottom: 10px;
    }
    .zdy-breadCrumbs,.zdy-breadCrumbs .other-span,.zdy-breadCrumbs .now-span{
        display: flex;
        align-items: center;
    }
    .zdy-breadCrumbs .other-span{
        color: #55cbe1;
    }
    .zdy-breadCrumbs .bread-crumbs-name{
        max-width: 100px;
        /* line-height: 15px; */
    }
    .other-span i{
        font-weight: 400;
        color:#606266;
    }
    /* department list ul */
    .hou-dprt-ul{
        margin: 0;
        padding: 0;
        list-style: none;
        height: 250px;
        overflow: hidden;
        overflow-y: auto;
    }
    .hou-sel-all,.hou-dprt-ul li{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
    }
    /* department name and checkbox */
    .hou-dprt-ul li .dprt,.hou-dprt-ul li .preson-item{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-right: 10px;
    }
    /* departments name */
    .dprt span{
        max-width: 197px;
        margin-left: 10px;
    }
    .preson-item span{
        max-width: 155px;
    }
    .hou-dprt-ul img{
        width: 20px;
        height: 20px;
    }
    .preson-item img{
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin: 0 5px;
        box-sizing: border-box;
        border:1px solid #66809d;
    }
    .hover-pointer{
        cursor: pointer;
    }
    /* open in child's button */
    .hou-dprt-ul li i{
        color: #38adff;
    }
    .hou-dprt-ul li:hover{
        background: #e7eaef;
    }
    /* select item panel */
    .hou-dprt-ul-right{
        height: 280px;
    }
    .hou-dprt-ul-right li i{
        color:#797a7b;
    }
</style>